<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>eSharing - Connectez-vous !!</title>
</head>
<body>

	<div class="topbarcontenu">
		<div>
			<span class="logo"><img src="images/logo.jpg" /></span> <span
				class="toplink"><a href="connexion.html">Connexion</a> <a
				href="inscription.html">Inscription</a></span> <span
				class="topbarrechercher"> <h:form class="recherchepages">
					<input type="text" id="cetaem" class="textrecherche" maxlength="80"
						placeholder="Que voulez-vous emprunter ?" />
					<input type="submit" id="btnrechercher" value="Rechercher" />
				</h:form>
			</span>
		</div>
		<br />
		<div>
			<span class="parrainage"> <h:form id="parrainer">
					<input type="text" id="cetaem" class="mailfileuil" maxlength="80"
						placeholder="Adresse mail" />
					<input type="submit" id="btnparrain" value="Parrainer un ami !" />
				</h:form>
			</span>
		</div>
	</div>

	<p></p>

	<div class="liens">

		<ul class="lienlist">
			<li><a href="">lien 1</a>
				<ul>
					<li><a href="">lien 1.1</a></li>
				</ul></li>
			<li><a href="">lien 1</a>
				<ul>
					<li><a href="">lien 1.1</a></li>
				</ul></li>
			<li><a href="">lien 1</a>
				<ul>
					<li><a href="">lien 1.1</a></li>
				</ul></li>
			<li><a href="">lien 1</a>
				<ul>
					<li><a href="">lien 1.1</a></li>
				</ul></li>
			<li><a href="">lien 1</a>
				<ul>
					<li><a href="">lien 1.1</a></li>
				</ul></li>
			<li><a href="">lien 1</a>
				<ul>
					<li><a href="">lien 1.1</a></li>
				</ul></li>
		</ul>

	</div>

	<div id="pagecontenu">

		<h2>Bienvenue dans la famille e-Sharing !</h2>

		Vous êtes preque prêt à prêter et à emprunter ! Pour vous inscrire, il
		suffit de saisir les informations suivantes. Les champs marqués avec *
		sont obligatoires.

		<div>

			<h:form id="inscription">
				<table>

					<tr>

						<td>Civilité :</td>
						<td><h:selectOneMenu id="civilite"
								value="#{mbInscription.civId}">
								<f:selectItems value="#{mbInscription.civilites}" var="civilite"
									itemLabel="#{civilite.label}" itemValue="#{civilite.value}" />
							</h:selectOneMenu> <br /></td>

					</tr>

					<tr>

						<td>Nom d'utilisateur :</td>
						<td><h:inputText id="txtNomUsr" maxlength="20" placeholder=""
								value="#{mbInscription.nomUtilisateur}" /><br /></td>

					</tr>
					<tr>
						<td>Courrier Électronique :</td>
						<td><h:inputText id="txtMail" maxlength="20" placeholder=""
								value="#{mbInscription.courriel}" /><br /></td>
					</tr>
					<tr>
						<td>Mot de passe :</td>
						<td><h:inputSecret id="txtMotDePasse1" maxlength="20"
								placeholder="" value="#{mbInscription.mdp}" /><br /></td>
					</tr>
					<tr>
						<td>Resaisir mot de passe :</td>
						<td><h:inputSecret id="txtMotDePasse2" maxlength="20"
								placeholder="" value="#{mbInscription.mdp2}" /><br /></td>
					</tr>
					<tr>
						<td>Nom :</td>
						<td><h:inputText id="txtNom" maxlength="50" placeholder=""
								value="#{mbInscription.nom}" /><br /></td>
					</tr>
					<tr>
						<td>Prenom :</td>
						<td><h:inputText id="txtPrenom" maxlength="50" placeholder=""
								value="#{mbInscription.prenom}" /><br /></td>
					</tr>
					<tr>

						<td>Numéro de voie :</td>
						<td><h:inputSecret id="txtNoVoie" maxlength="10"
								placeholder="" value="#{mbInscription.noVoie}" /><br /></td>

					</tr>

					<tr> 

						<td>Complément d'adresse :</td>
						<td><h:selectOneMenu id="compAd"
								value="#{mbInscription.complId}">
								<f:selectItems value="#{mbInscription.complements}"
									var="complement" itemLabel="#{complement.label}"
									itemValue="#{complement.value}" />
							</h:selectOneMenu> <br /></td>

					</tr>

					<tr>

						<td>Nom de la rue :</td>
						<td><h:inputSecret id="txtNomRue" maxlength="50"
								placeholder="" value="#{mbInscription.nomRue}" /><br /></td>

					</tr>

					<tr>

						<td>Région :</td>
						<td><h:selectOneMenu id="boxRegion"
								value="#{mbInscription.regionId}">
								<a4j:support event = "onchange" action = "#{mbInscription.valueChangeRegion()}" reRender = "boxDept" />
								<f:selectItems value="#{mbInscription.regions}" var = "region"
									itemLabel="#{region.label}" itemValue="#{region.value}" />
							</h:selectOneMenu> <br /></td>
							

					</tr>

					<tr>

						<td>Département :</td>
						<td><h:selectOneMenu id="boxDept"
								value="#{mbInscription.departementId}">
								<a4j:support event = "onchange" action = "#{mbInscription.valueChangeDepartement}" reRender = "boxCP" />
								<f:selectItems value = "#{mbInscription.departements}" var = "dept"
									itemLabel = "#{dept.label}" itemValue = "#{dept.value}" />
							</h:selectOneMenu> <br /></td>

					</tr>

					<tr>

						<td>Code postal :</td>
						<td><h:selectOneMenu id="boxCP"
								value="#{mbInscription.codePostalId}">
								<a4j:support event = "onchange" action = "#{mbInscription.valueChangeCp()}" reRender = "boxCommune" />
								<f:selectItems value="#{mbInscription.codePostaux}" var="cp"
									itemLabel="#{cp.label}" itemValue="#{cp.value}" />
							</h:selectOneMenu> <br /></td>

					</tr>

					<tr>

						<td>Commune :</td>
						<td><h:selectOneMenu id="boxCommune"
								value="#{mbInscription.communeCode}"
								>
								<a4j:support event = "onchange" action = "#{mbInscription.valueChangeVille()}" reRender = "boxCP" />
								<f:selectItems value = "#{mbInscription.communes}" var = "com"
									itemLabel = "#{com.label}" itemValue = "#{com.value}" />
							</h:selectOneMenu> <br /></td>

					</tr>

					<tr>

						<td>Numéro de téléphone (1) :</td>
						<td>+33 (0)<h:inputText id="txtTelephone1" maxlength="9"
								placeholder="" value="#{mbInscription.tel1.noTelFr}" /><br />
						</td>

					</tr>

					<tr>

						<td>Numéro de téléphone (2) :</td>
						<td>+33 (0)<h:inputText id="txtTelephone2" maxlength="9"
								placeholder="" value="#{mbInscription.tel2.noTelFr}" /><br />
						</td>

					</tr>

					<tr>

						<td>Date de naissance :</td>
						<td><rich:calendar id="dateNaissance" placeholder=""
								value="#{mbInscription.dateNaissance}" /><br /></td>

					</tr>

					<tr>

						<td>Autobiographie :</td>
						<td><h:inputTextarea name="autobiographie" cols="25" rows="5"
								maxlength="1024" value="#{mbInscription.autobiographie}" /> <br /></td>

					</tr>

					<tr>

						<td></td>
						<td><h:selectBooleanCheckbox value="#{mbInscription.accepte}" />J'accepte
							les <h:commandLink value="conditions
								d'utilisation" />.</td>

					</tr>

					<tr>

						<td></td>
						<td>Veuillez saisir les chiffres : <br /> <h:inputText
								value="#{mbInscription.captacha}" /> <h:graphicImage url="" /></td>
					</tr>
				</table>

				<h:commandButton value="S'inscrire" style="float: right"
					action="#{mbInscription.inscrire()}" />
			</h:form>

		</div>

	</div>

	<div id="goodies">

		<ul id="sociallinks" style="float: right">
			<li><a href="@sadfdsafdfd">FB</a></li>
			<li><a href="@sadfdsafdfd">TW</a></li>
			<li><a href="@sadfdsafdfd">G+</a></li>
			<li><a href="@sadfdsafdfd">RSS</a></li>
		</ul>

	</div>


	<div class="footer">
		<span style="align: left"> <a href="/trust">Confiance et
				sécurité</a>
		</span> <span style="align: left"> <a href="/about/about-us">A
				propos</a>
		</span>
	</div>


</body>

</html>